import { useState, useEffect } from "react";

import TodoAdd from "./components/TodoAdd";
import TodoFooter from "./components/TodoFooter";
import TodoList from "./components/TodoList";
// 导入todos样式
import "./App.css";

const initialState = [{ id: 1, text: "吃饭", done: false }];

const App = () => {
  const [todos, setTodos] = useState(initialState);
  //页面初始化读取本地化存储
  useEffect(() => {
    const initTodos = localStorage.getItem('TDLST') ? JSON.parse(localStorage.getItem('TDLST')) :''
    if(initTodos) {
      setTodos(initTodos)
    }
    console.log(initTodos);
  },[])
  //当todos 数据发生改变后把最新的todos 储存在本地
  useEffect(() => {
     localStorage.setItem('TDLST',JSON.stringify(todos))
    
  },[todos])

  const todoListAdds = (text) => {
    const id = todos.length === 0 ? 1 : todos[todos.length - 1].id + 1;
    setTodos([
      ...todos,
      {
        id,
        text,
        done: false,
      },
    ]);
  };
  const todoListIsShow = (id) => {
    const arr = todos.map((item) => {
      if (item.id === id) {
       item.done = !item.done;
      }
      return item;
    });
    setTodos(arr);
  };

  const todoListRemoveId= (id) => {
    const arr = todos.filter((item) => item.id !== id);
   setTodos(arr );
  }
  return (
    <section className="todoapp">
      <TodoAdd todoListAdd={todoListAdds} />

      <TodoList todos={todos} todoListIs={todoListIsShow} todoListRemove={todoListRemoveId} />

      <TodoFooter />
    </section>
  );
};

export default App;
